<!--
 * @Author: your name
 * @Date: 2021-05-21 15:15:20
 * @LastEditTime: 2021-06-08 20:41:03
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \cesium-vue\src\components\NavBar.vue
-->
<template>
    <div>
    <ul class="navList">
        <li class ="navLabel" >
            <label>三维地球平台</label>    
        </li>
        <li class="navItem navItem-clicked" @click ="select($event,4)">
            场景   
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-changjing"></use>
            </svg> 
        </li>
        <li class="navItem " @click="select($event,0)">
            模型
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-moxing"></use>
            </svg>
        </li>
        <li class="navItem" @click="select($event,1)">
            服务
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-suyaniconchanpinleibufenzuodaohangbufen85"></use>
            </svg>
        </li>
        <li class="navItem" @click ="select($event,2)">
            分析
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-A"></use>
            </svg>
        </li>
        <!-- <li class="navItem" @click ="select($event,3)">
            文件
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-wenjian"></use>
            </svg>
        </li> -->
        <li class="navItem" @click ="select($event,6)">
            标绘    
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-icon-xian"></use>
            </svg> 
        </li>
        <li class="navItem" @click="select($event, 7)">
            动画
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiaohuyanshidonghua"></use>
            </svg> 
        </li>
        <li class="navItem" @click ="select($event,8)">
            可视化  
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-jiaohuyanshidonghua"></use>
            </svg>   
        </li>
        <li class="navItem" @click ="select($event,5)">
            设置  
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-shezhi"></use>
            </svg>   
        </li>

    </ul>
    <div class="sub-menu">
        <models v-show="selectMenu == 0 ? true:false"></models>
        <service v-show="selectMenu ==1 ? true:false"></service>
        <analysis v-show="selectMenu ==2 ? true:false"></analysis>
        <!-- <file v-show="selectMenu ==3 ? true:false"></file> -->
        <scene v-show="selectMenu ==4?true:false"></scene>
        <setting v-show="selectMenu ==5 ? true: false"></setting>
        <draw v-show="selectMenu ==6 ? true: false"></draw>
        <animation v-show="selectMenu ==7? true: false"></animation>
        <terrain v-show="selectMenu==8?true:false"></terrain>
    </div>
    </div>

</template>
<script type="module">
import Models from './cesium/Models.vue'
import Service from '@/components/cesium/Service'
import Analysis from '@/components/cesium/Analysis.vue'
import Setting from '@/components/cesium/Setting'
import Draw from '@/components/cesium/Draw'
import Animation from '@/components/cesium/Animation'
import Scene from '@/components/cesium/Scene'
import Terrain from '@/components/cesium/Terrain'
    export default{
  components: {  Models ,Service, Analysis, 
  Setting, Draw, Animation, Scene, Terrain},
        data(){
            return{
                 selectMenu:4,
            }
        },

        methods:{
            select(event,index){
                let lastDom =document.getElementsByClassName("navItem-clicked")[0];
                if(lastDom){
                    lastDom.classList.remove("navItem-clicked")
                }

                let dom =event.currentTarget;

                // dom.style="background-color:rgba(0,0,0,1)";
                dom.classList.add("navItem-clicked")
                this.selectMenu =index;
            }
        },
        mounted(){
            // this.getModelSelected();
        }
    }
</script>
<style scoped>

    .navLabel{
        width:200px;
        color:yellow;
        flex-shrink: 0;
        height: 60px;
        line-height: 60px;
        font-size:20px;
    }


    .sub-menu{
        width:100%;
    height:60px;
    position:absolute;
    top:60px;
    background-color: rgba(0,0,0,0.3);
}
</style>